<script setup lang="ts">
  import { useRoute } from "vue-router";
  import TabBar from "./tabBar/index.vue";
  const uRoute = useRoute();
  const includes = ["DemoListHooksPage"];

  const defaultTransitionName = "fade";
</script>

<template>
  <RouterView>
    <template #default="{ Component, route }">
      <!-- 没有填写则使用默认的transitionName -->
      <transition :name="route.meta.transitionName || defaultTransitionName" mode="out-in" appear>
        <keep-alive v-if="route.meta.keepAlive" :include="includes">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />
      </transition>
    </template>
  </RouterView>
  <TabBar v-if="uRoute.meta.showTabbar" />
</template>

<style scoped></style>
